<template class="box">
  <div class="interview-Top">
    <div>
      <p style="font-size: 26px; font-weight: 300; margin-bottom: 10px">面试记录</p>
      <p style="color: #666">查看并管理所有面试记录和结果</p>
    </div>
    <el-button type="primary" style="width: 120px; height: 40px" @click="dialogFormVisible = true"
      >+安排新面试</el-button
    >
  </div>
  <list :listTitle="listTitle">
    <template #lists>
      <el-table :data="tableData" style="width: 100%; height: 400px">
        <el-table-column prop="name" label="候选人" width="180" />
        <el-table-column prop="posts" label="职位" width="180" />
        <el-table-column prop="interviewer" label="面试官" />
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="duration" label="时长" />
        <el-table-column prop="state" label="状态" />
        <el-table-column prop="score" label="得分" />
        <el-table-column label="操作">
          <div>
            <el-button type="text" size="small" style="display: flex; align-items: center"
              ><el-icon><View /></el-icon>查看详情</el-button
            >
          </div>
        </el-table-column>
      </el-table>
    </template>
  </list>
  <el-dialog
    v-model="dialogFormVisible"
    title="添加职位"
    width="800"
    style="height: 600px; overflow-y: scroll"
  >
    <!-- <articleDialogs :from="form"> </articleDialogs> -->
    <el-form :model="form">
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <p>选择候选人<span>*</span></p>
        <el-select v-model="form.region" placeholder="请选择候选人...">
          <el-option label="张明-前端开发工程师" value="zhangming" />
          <el-option label="李华-Java开发工程师" value="lihua" />
          <el-option label="王芳-UI设计师" value="wangfang" />
          <el-option label="赵伟-产品经理" value="zhaowei" />
          <el-option label="周杰-数据分析师" value="lijie" />
        </el-select>
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <p>职位<span>*</span></p>
        <el-select v-model="form.region" placeholder="请选择职位...">
          <el-option label="前端开发工程师" value="zhangming" />
          <el-option label="Java开发工程师" value="lihua" />
          <el-option label="UI设计师" value="wangfang" />
          <el-option label="产品经理" value="zhaowei" />
          <el-option label="数据分析师" value="lijie" />
        </el-select>
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <p>面试类型<span>*</span></p>
        <el-select v-model="form.region" placeholder="数字人面试">
          <el-option label="数字人面试" value="数字人" />
          <el-option label="人工面试" value="人工" />
          <el-option label="混合面试" value="混合" />
        </el-select>
      </el-form-item>
      <div class="el-form-state">
        <div class="elfs-left">
          <p>面试日期*</p>
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" />
        </div>
        <div class="elfs-center">
          <p>面试时间*</p>
          <el-time-picker v-model="form.date2" placeholder="Pick a time" />
        </div>
        <div class="elfs-right">
          <p>时长（分钟）*</p>
          <el-input v-model="form.name" autocomplete="off" />
        </div>
      </div>
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <p>面试官</p>
        <el-select v-model="form.region" placeholder="请选择面试官...">
          <el-option label="刘强-前端开发" value="刘强" />
          <el-option label="陈静-后端开发" value="陈静" />
          <el-option label="林梦-UI设计" value="林梦" />
          <el-option label="孙宇-产品管理" value="孙宇" />
        </el-select>
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <p>题目集 （可多选,按住Ctrl或Command键选择多项）</p>
        <el-select
          v-model="form.type"
          multiple
          collapse-tags
          collapse-tags-tooltip
          placeholder="Select"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <p>面试地点/链接</p>
        <el-input v-model="form.name" placeholder="会议室或在线会议链接" />
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <p>备注</p>
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <el-checkbox value="Promotion activities" name="type">
          发送面试通知邮件给候选人
        </el-checkbox>
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <el-checkbox value="Promotion activities" name="type"> 添加到日历 </el-checkbox>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getInterviewList } from '@/api/gts/interviewList'
import '@/mockjs/gts/pagination.ts'
import list from '@/components/list.vue'

let tableData = ref([])
const listTitle = ref('面试列表')
//弹框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = ref({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const value3 = ref([])
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

onMounted(async () => {
  // mockjs的模拟数据
  const res = await getInterviewList()
  tableData.value = res.items
})
</script>

<style scoped>
.box {
  padding: 30px 20px;
}
.interview-Top {
  display: flex;
  justify-content: space-between;
}
.interview-Table {
  background-color: #fff;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-form-state {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.elfs-left {
  width: 33%;
  display: flex;
  justify-content: space-around;
  align-items: left;
  flex-direction: column;
}
.elfs-center {
  width: 33%;
  display: flex;
  justify-content: space-around;
  align-items: left;
  flex-direction: column;
}
.elfs-right {
  width: 33%;
  display: flex;
  justify-content: space-around;
  align-items: left;
  flex-direction: column;
}
</style>
